@extends('seller::layout.master')

@section('title', __('seller::common.title'))

@section('body-class', 'admin-home')

@push('header')
<script src="{{ asset('vendor/chart/chart.min.js') }}"></script>
@endpush

@section('content')
<div class="row">
  <div class="col-xl-3 col-6">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between">
        <span>{{ __('seller::home.order_number') }}</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <div class="fs-2 lh-1 fw-bold">{{ $order_count }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-6">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between">
        <span>{{ __('seller::home.order_amount') }}</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <div class="fs-2 lh-1 fw-bold">{{ $order_total }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-6">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between">
        <span>{{ __('seller::home.product_quantity') }}</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <div class="fs-2 lh-1 fw-bold">{{ $product_count }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-6">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between">
        <span>{{ __('seller::home.balance_account') }}</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <img
              src="https://beikeshop.com/install/install-enter.jpg?version={{ config('beike.version') }}&build_date={{ config('beike.build') }}"
              class="d-none">
            <div class="fs-2 lh-1 fw-bold">{{ $balance }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-6 col-12">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>{{ __('seller::home.order_number') }}</div>
      </div>
      <div class="card-body">
        <canvas id="orders-chart" height="380"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-12">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>{{ __('seller::home.order_amount') }}</div>
      </div>
      <div class="card-body">
        <canvas id="orders-amount" height="380"></canvas>
      </div>
    </div>
  </div>
</div>

<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>{{ __('seller::home.order_list') }}</div>
  </div>
  <div class="card-body">
    <div class="table-push">
      <table class="table">
        <thead>
          <tr>
            <th>{{ __('order.id') }}</th>
            <th>{{ __('order.number') }}</th>
            <th>{{ __('order.customer_name') }}</th>
            <th>{{ __('order.payment_method') }}</th>
            <th>{{ __('order.status') }}</th>
            <th>{{ __('order.total') }}</th>
            <th>{{ __('order.created_at') }}</th>
            <th>{{ __('order.updated_at') }}</th>
            <th>{{ __('common.action') }}</th>
          </tr>
        </thead>
        <tbody>
          @if (count($orders))
            @foreach ($orders as $order)
              <tr data-hook-id={{ $order->id }}>
                <td>{{ $order->id }}</td>
                <td>{{ $order->number }}</td>
                <td>{{ sub_string($order->customer_name, 14) }}</td>
                <td>{{ $order->payment_method_name }}</td>
                <td>{{ $order->status_format }}</td>
                <td>{{ currency_format($order->total, $order->currency_code, $order->currency_value) }}</td>
                <td>{{ $order->created_at }}</td>
                <td>{{ $order->updated_at }}</td>
                <td><a href="{{ seller_route('orders.show', [$order->id]) }}"
                    class="btn btn-outline-secondary btn-sm">{{ __('common.view') }}</a>
                </td>
              </tr>
            @endforeach
          @else
            <tr>
              <td colspan="9" class="border-0">
                <x-seller-no-data />
              </td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection

@push('footer')
<script>
  const orders = document.getElementById('orders-chart').getContext('2d');
  const ordersAmount = document.getElementById('orders-amount').getContext('2d');

  const orderGradient = orders.createLinearGradient(0, 0, 0, 380);
  orderGradient.addColorStop(0, 'rgba(180,223,253,1)');
  orderGradient.addColorStop(1, 'rgba(180,223,253,0)');

  const amountGradient = orders.createLinearGradient(0, 0, 0, 380);
  amountGradient.addColorStop(0, 'rgba(32,201,151,0.3)');
  amountGradient.addColorStop(1, 'rgba(32,201,151,0)');

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: false // Hide legend
    },
    interaction: {
      mode: 'index',
      intersect: false,
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          drawBorder: false,
          borderDash: [3],
        },
      },
      x: {
        beginAtZero: true,
        grid: {
          drawBorder: false,
          display: false
        },
      }
    },
  }

  const ordersAmountChart = new Chart(ordersAmount, {
    type: 'line',
    data: {
      labels: @json($chart['date'] ?? []),
      datasets: [
        {
          label: ["{{ __('admin/order.order_amount') }}"],
          fill: true,
          backgroundColor : orderGradient, // Put the gradient here as a fill color
          borderColor : "#4da4f9",
          borderWidth: 2,
          data: @json($chart['amount'] ?? []),
          responsive: true,
          lineTension: 0.4,
          datasetStrokeWidth: 3,
          pointDotStrokeWidth: 4,
          pointHoverBorderWidth: 8,
          pointBackgroundColor: '#4da4f9',
        },
      ],
    },

    options: chartOptions
  });

  const ordersChart = new Chart(orders, {
    type: 'line',
    data: {
      labels: @json($chart['date'] ?? []),
      datasets: [
        {
          label: ["{{ __('admin/order.order_quantity') }}"],
          fill: true,
          backgroundColor : orderGradient, // Put the gradient here as a fill color
          borderColor : "#4da4f9",
          borderWidth: 2,
          data: @json($chart['count'] ?? []),
          responsive: true,
          lineTension: 0.4,
          datasetStrokeWidth: 3,
          pointDotStrokeWidth: 4,
          pointHoverBorderWidth: 8,
          pointBackgroundColor: '#4da4f9',
        },
      ],
    },

    options: chartOptions
  });
</script>
@endpush
